<template>
	<div class="container">
		<div class="jx-container">
      <div class="card-list">
        <el-card shadow="hover" v-for="(item,index) in list" :key="index">
          <div class="header">
            <div class="title">
              {{item.bankName}}
              <span>储蓄卡</span>
            </div>
          </div> 
          <div class="card-con">
            <div class="item">持卡人: {{item.owner}}</div>
            <div class="item">{{item.bankAccount}}</div>
            <div class="but">
              <el-button type="text" style="color: #999;" @click="untie(item)">解绑此卡</el-button>
            </div>
          </div>
        </el-card>
        <el-card shadow="hover" class="newCard" style="text-align: center;">
          <div @click="addCard">
            <i class="el-icon-plus"></i>
            <span style="color: #999;">添加银行卡</span>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">添加银行卡</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="所属银行：" prop="bankName">
                <el-select class="tel-value" v-model="currentRow.bankName" placeholder="请选择">
                  <el-option v-for="(item,index) in banklist" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="卡片类型：" prop="type">
                <el-select class="tel-value" v-model="currentRow.type" placeholder="请选择">
                  <el-option label="储蓄卡" value="1"></el-option>
                  <el-option label="信用卡" value="2"></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="持卡人：" prop="owner">
                <el-input class="tel-value" v-model="currentRow.owner" placeholder="请输入持卡人姓名"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号：" prop="bankAccount">
                <el-input class="tel-value" v-model="currentRow.bankAccount" placeholder="请输入卡号"></el-input>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">提交</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
      const validateNumber = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('卡号不能为空'));
        } else {
          if (this.$reg.isNum(value)) {
            callback();
          } else {
            return callback(new Error('卡号须为数字'));
          }
        }
      }
			return {
        https: {
          list: this.$api.finance.banks,
          common: this.$api.common.dict,
        },
        boo: {
          loading: false,
          saveing: false,
          showDialog: false,
        },
        currentRow: {},
        list: '',
        banklist: [],
        rules: {
          bankName: [{ required: true, message: '请选择所属银行', trigger: 'change' }],
          owner: [{ required: true, message: '请输入持卡人姓名', trigger: 'blur' }],
          bankAccount: [{ required: true, validator: validateNumber, trigger: 'blur' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getDict('bankName')
    },
		methods: {
      getDict(type){
        let _self = this
        let params = {
          dictCode: type,
        }
        // 新建判断Map
        let actions = (i,list,)=>{
          return new Map([
            ['bankName',()=>{
              _self.banklist = list
            }],
          ]).get(i).call(this)
        }
        let success = (res)=>{
          if(res.data.retCode == 1){
            actions(type,res.data.retObject)
          }else{
            _self.$message.error(res.data.retMsg)
          }
        }
        _self.$axios.get(_self.https.common, params, success) 
      },
      getList(){
        let _self = this
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, {}, success) 
      },
      untie(item){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.delete(`${_self.https.list.delete}${item.bankId}`, {}, success) 
      },
      addCard(){
        let _self = this
        _self.boo.showDialog = true
        _self.currentRow = {}
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.saveing = true
            let params = {
              bankName: _self.currentRow.bankName,
              owner: _self.currentRow.owner,
              bankAccount: _self.currentRow.bankAccount,
            }    
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.$message.success('银行卡添加成功')
                _self.getList()
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
              _self.boo.showDialog = false
            }
            _self.$axios.post(_self.https.list.add, params, success)   
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .card-list
    display: flex
    flex-wrap: wrap 
    margin-top: 30px
    padding: 0 20px
    border-radius: 6px
    .el-card
      width: 30%
      position: relative
      height: 196px
      margin-bottom: 20px
      margin-right: 20px
    /deep/ .el-card__body
      padding: 0
      i 
        display: block 
        text-align: center
        font-size: 70px
        color: #c0c4cc
        margin-bottom: 15px
    .newCard  /deep/ .el-card__body
      position: relative
      top: 50%
      margin-top: -56px
    .header
      background: #409EFF
      color: #fff
      padding: 20px 30px 10px
      font-size: 16px
      .title
        display: flex
        justify-content: space-between
      span
        font-size: 14px
    .card-con
      padding: 0 30px 15px
      margin-top: 10px
      .item
        line-height: 36px
      .but
        margin-top: 10px
        text-align: right
</style>
